<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
	<title>贴吧</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<link rel="stylesheet" href="../css/message.css">
	<link rel="stylesheet" href="../../ueditor/themes/default/css/umeditor.css">
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<style>
		body {
			background: #ddd;
		}

		.form-group {
			position: relative;
		}

		.form-group i {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 30px;
			text-align: center;
			line-height: 34px;
			opacity: .69;
		}

		.has-error {
			color: #a94442;
		}

		.visible {
			display: block !important;
		}
	</style>
</head>
<body>
	<!-- 导航条 -->
	<nav class="navbar navbar-inverse">
		<div class="container">
			<div class="navbar-header">
				<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="../index.html">贴吧</a>
			</div>
			<nav id="bs-navbar" class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<li>
						<a href="#" data-toggle="modal" data-target=".login-modal">登录</a>
					</li>
					<li>
						<a href="#" data-toggle="modal" data-target=".regist-modal">注册</a>
					</li>
				</ul>
			</nav>
		</div>
	</nav>

	<!-- 登录框 -->
	<div class="modal fade login-modal" tabindex="-1" role="dialog" aria-labelledby="label">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="label">登录</h4>
				</div>
				<div class="modal-body" style="padding: 24px">
					<!-- 登录失败信息提示 -->
					<div class="alert alert-danger login-alert" role="alert" style="display: none"></div>
					<form style="opacity: .69">
						<div class="form-group">
							<label class="control-label" for="username" style="display: none">用户名不能为空</label>
							<i class="fa fa-user"></i>
							<input type="text" class="form-control" id="username" placeholder="用户名" style="padding-left: 30px">
						</div>
						<div class="form-group">
							<label class="control-label" for="password" style="display: none">密码不能为空</label>
							<i class="fa fa-lock"></i>
							<input type="password" class="form-control" id="password" placeholder="密码" style="padding-left: 30px">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary login-btn">登录</button>
				</div>
			</div>
		</div>
	</div>

	<!-- 注册框 -->
	<div class="modal fade regist-modal" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">注册</h4>
				</div>
				<div class="modal-body" style="padding: 24px">
					<form style="opacity: .69">
						<div class="form-group">
							<label class="control-label" for="regist-username" style="display: none">用户名不能为空</label>
							<i class="fa fa-user"></i>
							<input type="text" class="form-control" id="regist-username" placeholder="用户名" style="padding-left: 30px">
						</div>
						<div class="form-group">
							<label class="control-label" for="regist-password" style="display: none">密码不能为空</label>
							<i class="fa fa-lock"></i>
							<input type="password" class="form-control" id="regist-password" placeholder="密码" style="padding-left: 30px">
						</div>
						<div class="form-group">
							<label class="control-label" for="confirm-password" style="display: none">密码不能为空</label>
							<i class="fa fa-lock"></i>
							<input type="password" class="form-control" id="confirm-password" placeholder="确认密码" style="padding-left: 30px">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary regist-btn">注册</button>
				</div>
			</div>
		</div>
	</div>

	<!-- 主体内容 -->
	<div class="container">
		<div class="row">
			<!-- 帖子区域 -->
			<div class="col-md-8">
				<div class="panel panel-default">
					<div class="panel-heading">
						发帖
					</div>
					<div class="panel-body">
						<form>
							<div class="form-group">
								<label for="title">标题</label>
								<input type="text" class="form-control" id="title" placeholder="标题">
							</div>
							<div class="form-group">
								<label for="container">内容</label>
								<!-- 加载编辑器的容器 -->
								<script id="container" name="content" type="text/plain" style="box-sizing: content-box; width: 100%; height: 200px;"></script>
							</div>
							<button type="button" class="btn btn-default submit" style="float: right">发布</button>
						</form>
					</div>
				</div>
			</div>

			<!-- 右侧栏 -->
			<div class="col-md-4">

			</div>
		</div>
	</div>

	<script src="../js/jquery-3.3.1.min.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script src="../js/template-web.js"></script>
	<script src="../js/message.js"></script>
	<!-- ueditor配置文件 -->
	<script src="../../ueditor/umeditor.config.js"></script>
	<!-- ueditor编辑器源码文件 -->
	<script src="../../ueditor/umeditor.js"></script>

	<!-- 用户信息模板 -->
	<script id="userinfo_template" type="text/html">
		<li class="dropdown">
			<a id="drop" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
				{{username}}
				<span class="caret"></span>
			</a>
			<ul class="dropdown-menu" aria-labelledby="drop">
				<li><a href="../index.html">主页</a></li>
				<li><a href="../user/settings.html">设置</a></li>
				<li role="separator" class="divider"></li>
				<li><a class="logout" href="#">退出登录</a></li>
			</ul>
		</li>
	</script>

    <script>
        $(function() {
        	var user; // 当前登录用户

			// 初始化 ueditor
            var um = UM.getEditor('container', {
                imageUrl: '/imageUp', // 图片上传接口
                imagePath: '',
                autoHeightEnabled: false, // 是否自动长高,默认true
				toolbar:[
					'bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |',
					'insertorderedlist insertunorderedlist',
					'justifyleft justifycenter justifyright justifyjustify',
					'link unlink | emotion image'
				],
                focus: true
            });

			// 发送一条请求查询是否登陆
			$.get('/user/current', function (resp) {
				user = resp;
				var html = template('userinfo_template', resp);
				$('.navbar .navbar-collapse .navbar-right').html(html);
			})

            // 发帖
			$('.submit').on('click', function () {
				var title = $('#title').val(); // 标题
				var content = um.getContent(); // 获取html内容
				var text = um.getContentTxt(); // 获取纯文本

				// 回帖前校验用户是否登陆
				if (typeof user == 'undefined') {
					$.message({message: '登录之后才能回帖哦', type: 'warning'});
					return;
				}

				if (title == '') { // 校验标题
					$.message({message: '标题不能为空', type: 'warning'});
					return;
				}

				if (content == '') { // 校验内容
					$.message({message: '内容不能为空', type: 'warning'});
					return;
				}

				var post = {
					title: title,
					content: content,
					text: text,
					type: 1
				};

				// 获取图片地址
				var container = document.getElementById('container');
				var imgs = container.getElementsByTagName('IMG');
				if (imgs.length != 0) { // 如果插入了图片
					var imgURLs = [];
					for (var i = 0; i < imgs.length; i++) {
						imgURLs.push(imgs[i].src);
					}
					post.imgURLs = imgURLs.join(',')
				}
				$.post('/post', post, function (resp) {
					window.location.href = '../index.html'
				}).fail(function (resp) { // 发布失败
					$.message({message: '发布失败', type: 'error'});
				})
			});

			// 登录
			$('.login-btn').on('click', function () {
				var username = $('#username').val();
				var password = $('#password').val();

				// 登录之前先清空所有表单校验的提示
				$('#username').siblings('.control-label').removeClass('visible');
				$('#password').siblings('.control-label').removeClass('visible');
				$('#username').parent('.form-group').removeClass('has-error');
				$('#password').parent('.form-group').removeClass('has-error');
				$('.login-alert').removeClass('visible')

				// 校验表单
				if (username == '') {
					$('#username').siblings('.control-label').addClass('visible').html('用户名不能为空');
					$('#username').parent('.form-group').addClass('has-error');
				}
				if (password == '') {
					$('#password').siblings('.control-label').addClass('visible').html('密码不能为空')
					$('#password').parent('.form-group').addClass('has-error');
				}
				if (username == '' || password == '') { // 表单校验失败就终止接下来的操作
					return;
				}

				// 登录请求
				$.post('/user/login', {username: username, password: password}, function (resp) { // 登录成功
					$.message('登录成功');
					user = resp;
					$('.login-modal').modal('toggle');
					var html = template('userinfo_template', resp);
					$('.navbar .navbar-collapse .navbar-right').html(html);
				}).fail(function (resp) { // 登录失败
					$('#username').parent('.form-group').addClass('has-error');
					$('#password').parent('.form-group').addClass('has-error');
					$('.login-alert').addClass('visible').text(resp.responseJSON.message);
				});
			})

			// 登录框关闭事件
			$('.login-modal').on('hidden.bs.modal', function (e) {
				$('#username').val('');
				$('#password').val('');
				$('#username').siblings('.control-label').removeClass('visible');
				$('#password').siblings('.control-label').removeClass('visible');
				$('#username').parent('.form-group').removeClass('has-error');
				$('#password').parent('.form-group').removeClass('has-error');
				$('.login-alert').removeClass('visible')
			})

			// 当用户名输入值不为空的时候,撤销'用户名不为空'的警告
			$('#username').on('input propertychange', function () {
				if ($(this).val != '') {
					$(this).siblings('.control-label').removeClass('visible');
					$(this).parent('.form-group').removeClass('has-error');
				}
			})

			// 当密码输入值不为空的时候,撤销'密码不为空'的警告
			$('#password').on('input propertychange', function () {
				if ($(this).val != '') {
					$(this).siblings('.control-label').removeClass('visible');
					$(this).parent('.form-group').removeClass('has-error');
				}
			})

			// 检查用户名是否注册过了
			$('#regist-username').on('blur', function () {
				var _this = $(this);
				var username = _this.val();

				if (username != '') {
					$.get('/user/check/username', {username: username}, function (resp) {
						if (resp) {
							_this.siblings('.control-label').addClass('visible').html('用户名已注册');
							_this.parent('.form-group').addClass('has-error');
						} else {
							_this.siblings('.control-label').removeClass('visible');
							_this.parent('.form-group').removeClass('has-error');
						}
					})
				}
			})

			// 校验两次输入的密码是否一致(密码)
			$('#regist-password').on('input propertychange', function () {
				var password = $(this).val();
				var confirm_password = $('#confirm-password').val();

				if (password != confirm_password) {
					$(this).siblings('.control-label').addClass('visible').html('两次输入的密码不一致');
					$(this).parent('.form-group').addClass('has-error');
					$('#confirm-password').siblings('.control-label').addClass('visible').html('两次输入的密码不一致');
					$('#confirm-password').parent('.form-group').addClass('has-error');
				} else {
					$(this).siblings('.control-label').removeClass('visible');
					$(this).parent('.form-group').removeClass('has-error');
					$('#confirm-password').siblings('.control-label').removeClass('visible');
					$('#confirm-password').parent('.form-group').removeClass('has-error');
				}
			})

			// 校验两次输入的密码是否一致(确认密码)
			$('#confirm-password').on('input propertychange', function () {
				var password = $('#regist-password').val();
				var confirm_password = $(this).val();

				if (password != confirm_password) {
					$('#regist-password').siblings('.control-label').addClass('visible').html('两次输入的密码不一致');
					$('#regist-password').parent('.form-group').addClass('has-error');
					$(this).siblings('.control-label').addClass('visible').html('两次输入的密码不一致');
					$(this).parent('.form-group').addClass('has-error');
				} else {
					$('#regist-password').siblings('.control-label').removeClass('visible');
					$('#regist-password').parent('.form-group').removeClass('has-error');
					$(this).siblings('.control-label').removeClass('visible');
					$(this).parent('.form-group').removeClass('has-error');
				}
			})

			// 注册
			$('.regist-btn').on('click', function () {
				// 注册之前先清空所有表单校验的提示
				$('#regist-username').siblings('.control-label').removeClass('visible');
				$('#regist-password').siblings('.control-label').removeClass('visible');
				$('#confirm-password').siblings('.control-label').removeClass('visible');
				$('#regist-username').parent('.form-group').removeClass('has-error');
				$('#regist-password').parent('.form-group').removeClass('has-error');
				$('#confirm-password').parent('.form-group').removeClass('has-error');

				var vaild = true;
				var username = $('#regist-username').val();
				var password = $('#regist-password').val();
				var confirm_password = $('#confirm-password').val();

				// 表单校验
				if (username == '') {
					$('#regist-username').siblings('.control-label').addClass('visible').html('用户名不能为空');
					$('#regist-username').parent('.form-group').addClass('has-error');
					vaild = false;
				}
				if (password == '') {
					$('#regist-password').siblings('.control-label').addClass('visible').html('密码不能为空');
					$('#regist-password').parent('.form-group').addClass('has-error');
					vaild = false;
				}
				if (confirm_password == '') {
					$('#confirm-password').siblings('.control-label').addClass('visible').html('密码不能为空');
					$('#confirm-password').parent('.form-group').addClass('has-error');
					vaild = false;
				}
				if (password != confirm_password) {
					$('#regist-password').siblings('.control-label').addClass('visible').html('两次输入的密码不一致');
					$('#regist-password').parent('.form-group').addClass('has-error');
					$('#confirm-password').siblings('.control-label').addClass('visible').html('两次输入的密码不一致');
					$('#confirm-password').parent('.form-group').addClass('has-error');
					vaild = false;
				}
				$.get('/user/check/username', {username: username}, function (resp) {
					if (resp) {
						$('#regist-username').siblings('.control-label').addClass('visible').html('用户名已注册');
						$('#regist-username').parent('.form-group').addClass('has-error');
					} else {
						if (!vaild) return;
						$.post('/user/regist', {username: username, password: password}, function (resp) {
							$.message('注册成功');
							$('.regist-modal').modal('toggle');
						})
					}
				})

			})

			// 注册框关闭事件
			$('.regist-modal').on('hidden.bs.modal', function (e) {
				$('#regist-username').val('');
				$('#regist-password').val('');
				$('#confirm-password').val('');
				$('#regist-username').siblings('.control-label').removeClass('visible');
				$('#regist-password').siblings('.control-label').removeClass('visible');
				$('#confirm-password').siblings('.control-label').removeClass('visible');
				$('#regist-username').parent('.form-group').removeClass('has-error');
				$('#regist-password').parent('.form-group').removeClass('has-error');
				$('#confirm-password').parent('.form-group').removeClass('has-error');
			})

			// 退出登录
			$(document).on('click', '.logout', function () {
				$.get('/user/logout', function (resp) {
					window.location.reload()
				})
			})
        })
    </script>
</body>
</html>
